

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付码</title>
    
      <script src='https://cdn.jsdelivr.net/jsbarcode/3.5.1/JsBarcode.all.min.js'></script>

    <link rel="stylesheet" href="css/style.css">
    <style>
        .wrap{
            padding: 1.2rem 0;
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background-color: #4c2a16;
        }
        .paymain{
            margin: 0 auto;
            height: 9rem;
            width: 85%;
            display:flex;
            flex-flow:column nowrap;
            justify-content: center;
            align-items:center;
            background-color:#fff;
            border-radius:0.1rem;
        }
        .barcode{
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            margin-top: 50rpx;
            height: 80px;
            width: 160px;
        }
        .qrcode{
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            height: 150px;
            width: 150px;
            text-align: center;
        }
        .paycon{
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
        }


    </style>
    <script type="text/javascript">
            JsBarcode("#barcode1", "123", {
  format: "CODE39",//选择要使用的条形码类型
            width: 3,//设置条之间的宽度
  height:100,//高度
  displayValue:true,//是否在条形码下方显示文字
  text:"456",//覆盖显示的文本
  fontOptions:"bold italic",//使文字加粗体或变斜体
  font:"fantasy",//设置文本的字体
  textAlign:"left",//设置文本的水平对齐方式
  textPosition:"top",//设置文本的垂直位置
  textMargin:5,//设置条形码和文本之间的间距
  fontSize:15,//设置文本的大小
  background:"#eee",//设置条形码的背景
  lineColor:"#2196f3",//设置条和文本的颜色。
  margin:15//设置条形码周围的空白边距
});
    </script>
</head>

<body>
    <div class="wrap">
        <div class="paymain">
            <div class="paycon">
<svg id="barcode1"></svg>
                <view class="barcode">
                    <img src="image/1.png" alt="">
                </view>

                <view class="codenum">3009 0353 3233 3420 85 </view>


                <view class="qrcode">
                    <img src="image/2.png" alt="">
                </view>

            </div>
        </div>
    </div>
    <script>
       
    </script>
</body>
</html>

